<template>  
  <div id="detailsData" @click="detailsClick">
    <article class="detailsTop">
      <span class="flt iconfont icon-fanhui" @click="back"></span>
      <div class="title">{{$route.query.terminal}}</div>
      <span class="frt iconfont icon-gengduo" @click.stop="popShow"></span>
      <div class="popSelect" v-show="popIsShow">
        <ul>
          <li @click.stop="popSelectClick(2)">转发数据</li>
        </ul>
      </div>
    </article>
    <article class="detailsMain">
      <div class="loading" v-show="detailsLoading">
        <p class="iconfont icon-Loading"></p>
      </div>
      <div class="noData" v-show="detailsList.length === 0">暂无数据</div>
      <ul class="detailsList">
        <li 
        class="flt" 
        v-for="(item, idx) in detailsList"
        :key="idx"
        :style="{background: colorShow(item.status)}">
          <div class="itemTitle">
            {{item.alarmName}}
            <span v-if="item.status === '2'" class="frt gou iconfont icon-ziyuan"></span>
          </div>
          <p class="sensorType">{{item.sensorType}}</p>
          <p class="actualData">{{item.actualData}}</p>
          <p class="uploadTime">{{item.uploadTime}}</p>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
export default {
  name: 'detailsData',
  data () {
    return {
      detailsList: [],
      popIsShow: false,
      detailsLoading: true
    }
  },
  activated () {
    this.detailsList = [];
    this.getTerminalDetail();
  },
  deactivated () {
    
  },
  methods: {
    getTerminalDetail () {
      this.detailsLoading = true;
      this.$http.get(
        `/Anxun/app/terminalDetail.do?terminalId=${this.$route.query.terminalId}`
      ).then(res => {
        if(res.Code === '200'){
          this.detailsList = res.data;
        }else{

        }
        this.detailsLoading = false;
      })
    },
    back () {
      window.history.back();
    },
    colorShow (status) {
      if(status === '0'){
        return "#19C090"
      }else if(status === '1') {
        return "#DB5061"
      }else if(status === '2') {
        return "#DB5061"
      }else if(status === '3') {
        return "#999898"
      }else if(status === '4') {
        return "#999898"
      }else if(status === '11') {
        return "#F2B02B"
      }else if(status === '12') {
        return "#F2B02B"
      }else{
        return "#19C090"
      }
    },
    popShow () {
      this.popIsShow = !this.popIsShow;
    },
    detailsClick () {
      this.popIsShow = false;
    },
    popSelectClick(type){
      if(type === 2){
        this.sendInfoToNative();
      }
      this.popIsShow = false;
    },
    //调用webview原生方法
    sendInfoToNative () {
      if(this.detailsList.length > 0){
        let params = {
          content: `单位名称:${this.$route.query.companyName}, 终端:${this.$route.query.terminal}, 设备运行报告(${this.detailsList[0].uploadTime}):`
        };
        for(let i = 0; i < this.detailsList.length; i++){
          params.content += `${this.detailsList[i].sensorType + " " + this.detailsList[i].actualData + "("  + this.detailsList[i].alarmName + ")"}; `
        }
        try {
          JKEventHandler.callNativeFunction('sendInfoToNative',params,null,null);
        }catch (e) {
          console.log(e);
          console.log(params);
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  #detailsData{
    width: 100%;
    height: 100%;
    .detailsTop{
      width: 100%;
      height: 50px;
      color: #068efb;
      font-size: 20px;
      border-bottom: 1px solid #dedede;
      position: relative;
      .iconfont{
        font-size: 24px;
        width: 50px;
        height: 100%;
        line-height: 50px;
        text-align: center;
      }
      .title{
        width: calc(100% - 100px);
        height: 100%;
        text-align: center;
        line-height: 50px;
        float: left;
        color: #333;
      }
      .popSelect{
        position: absolute;
        top: 45px;
        right: 10px;
        background: rgba(0,0,0,0.6);
        border-radius: 5px;
        color: #fff;
        font-size: 16px;
        text-align: center;
        width: 90px;
        height: auto;
        z-index: 10;
        ul{
          width: 100%;
          min-height: 1px;
          overflow: hidden;
          li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #fff;
          }
          li:first-of-type{
            padding-top: 5px;
          }
          li:last-of-type{
            border: 0 none;
            padding-bottom: 5px;
          }
        }
      }
      .popSelect::before{
        position: absolute;
        top: -10px;
        right: 10px;
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 10px 5px;
        border-color: transparent transparent rgba(0,0,0,0.6) transparent;

      }
    }
    .detailsMain{
      width: 100%;
      height: calc(100% - 51px);
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      .noData{
        font-size: 18px;
        text-align: center;
        line-height: 200px;
      }
      ul{
        width: 100%;
        min-height: 1px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 5px;
        li{
          width: calc(50% - 20px);
          height: 120px;
          min-width: 100px;
          max-width: 180px;
          background: green;
          margin: 10px;
          border-radius: 8px;
          color: #fff;
          padding: 10px;
          box-sizing: border-box;
          p{
            text-align: right;
          }
        }
        .itemTitle{
          font-size: 16px;
          padding-bottom: 5px;
          .iconfont{
            font-size: 18px;
          }
        }
        .actualData{
          font-size: 24px;
          line-height: 36px;
        }
        .uploadTime{
          font-size: 10px;
        }
      }
    }
  }



  .loading{
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255,0.8);
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1000;
    p{
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 40px;
      color: #068efb;
      width: 40px;
      height: 40px;
      margin-top: -20px;
      margin-left: -20px;
      animation: loadingAnimation 2.5s linear infinite;
    }
  }
  @keyframes loadingAnimation{
    0%{
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loadingAnimation{
    0%{
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>